<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>锅打灰太狼</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.container{
				width: 480px;
				height: 720px;
				margin: 0 auto;
				position: relative;
			}
			.background{
				position: absolute;
				z-index: -100;
				width: 100%;
			}
			.pro{
				position: absolute;
				width:270px;
				height: 24px;
				border-radius: 10px; 
				left: 95px;
				top: 99px;
				background: url(img/progress.png) 0 0 no-repeat;
				background-size: 100%;
				background-position-x: 0px;
			}
			.start{
				width: 250px;
				border: 0;
				border-radius: 30px;
				background: linear-gradient(#E55C3D,#C50000);
				margin: 0 auto;
				font-size: 40px;
				position: absolute;
				color: #fff;
				left: 0;
				right: 0;
				margin: 0 auto;
				top:400px;
			}
			.start:hover{
				background: linear-gradient(#C50000,#E55C3D);
			}
			.score{
				position: absolute;
				left: 100px;
				top: 20px;
				color: #fff;
			}
			.over{
				text-align: center;
				position: relative;
				top: 300px;
				font-weight: bold;
				display: none;
				font-size: 60px;
				text-shadow: 3px 3px 0 #fff;
				background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 0, 0, 1)), to(rgba(0, 0, 213, 1)));
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
			}
			.restart{
				width: 250px;
				border: 0;
				border-radius: 30px;
				background: linear-gradient(#74ACCF,#007DDC);
				margin: 0 auto;
				font-size: 40px;
				position: absolute;
				color: #fff;
				left: 0;
				right: 0;
				margin: 0 auto;
				top:400px;
				display: none;
			}
			.restart:hover{
				background: linear-gradient(#007DDC,#74ACCF);
			}
			.rules{
				border: 0;
				width: 100%;
				position: absolute;
				bottom: 0px;
				font-size: 20px;
			}
			.rule{
				position: absolute;
				width: 100%;
				height: 500px;
				text-align: center;
				background: #000;
				opacity: 0.8;
				padding-top: 200px;
			}
			.rule p{
				padding: 20px 0;
				font-size: 20px;
				color: #fff;
			}
			.rule{
				padding-bottom: 20px;
				display: none;
				position: absolute;
				z-index: 1000000000000;
			}
			a{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1 class="score">0</h1>
			<img src="img/game_bg.jpg" style="width: 100%;" class="background"/>
			<div class="pro"></div>
			<button class="start">开始游戏</button>
			<h1 class="over">失败</h1>
			<button class="restart">重新开始</button>
			<button class="rules">游戏规则</button>
			<div class="rule">
				<p>游戏规则:</p>
				<p>1.游戏时间:60s</p>
				<p>2.拼手速,殴打灰太狼+10分</p>
				<p>3.殴打小灰灰-10分</p>
				<a href="#">[关闭]</a>
			</div>
		</div>

	</body>
	<script src="js/hmk01.js" type="text/javascript" charset="utf-8"></script>
</html>
<!--1.
		2.创建狼
			生成一个狼——是生成小灰灰还是灰太狼
			随机一个位置——判断该位置是否有狼
			无,则把狼放到该位置
		3.狼动画
			狼上升
			定时器更改图片路径实现动画
			判断是否到了最上面的位置
			是则下降
			下降到最底部把狼删掉——清空该清空的定时器
		4.打狼
			不管原先狼的动画跑到第几帧,
			把帧数设置成打狼的动画
			打灰太狼加分
			打小灰灰减分
		5.游戏结束
			把页面的数据还原到初始状态-->